<template>
    <div class="details_main">
        <h2 class="title">{{ list[0].productName }}</h2>
        <p class="productPinkage">{{ list[0].productPinkage }}</p>
         <div class="Identification"><span>{{ list[0].productFrom }}</span><span>{{ list[0].productTime }}</span><span>{{ list[0].productTips }}</span> </div>
         
        <div class="image_main">
            <div v-html="list[0].productImgSm"></div>
            <div class="productInfo1">{{ list[0].productInfo }}</div>
        </div> 
         
         <span class="content_main">{{ list[0].productInfo2 }}</span> 

		<div class="mui-content-padded">
         <button type="button" class="mui-btn mui-btn-danger mui-btn-block">购买</button>
		</div>
    </div>
</template>
<style lang="less" scoped>
.details_main{
    margin-top: 53px;
    padding-left: 10px;
    width: 100%;

    .title{
        width: 100%;
        font-size: 20px;
        margin-bottom: 10px;
        overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
    }
    .productPinkage{
        font-size: 17px;
        color: #FF9000;
    }
    .productInfo1{
        font-size: 14px;
    }
    .Identification{
        font-size: 14px;
        span{
            margin-right: 15px;
        }
    }
    .image_main{
        width: 100%;
        position: relative;
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
        
        .productInfo1{
            width: 100%;
            position: absolute;
            bottom: 0;
            background-color: rgba(0, 0, 0, .4);
            padding: 15px 20px;
            color: chocolate;
        }
    }
   .content_main{
       font-size: 15px;
       display: block;
       width: 100%;
       padding: 0 20px;
       margin: 20px 0;
   }
}
</style>
<script>
export default {
    data() {
        return {
            id:this.$route.params.id,
            list:{}
        }
    },
    created(){
         this.getId();
    },
    methods:{
        getId(){
           this.$http.get("api/getmoneyctrlproduct?productid="+this.id).then(function(response){
                this.list = response.body.result;
                if(this.list[0].productInfo==""){
                     this.list[0].productInfo = "当你走进这欢乐场忘掉所有的泪和伤"
                }
           })
        }
    }
}
</script>
